﻿<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>
<title>Extending Raphael</title>
<link rel="stylesheet" type="text/css" href="../lib/styles.css"/>
<script type="text/javascript" src="../lib/jquery-1.7.2.min.js"></script>
<script type="text/javascript" src="../lib/raphael-min.js"></script>
<script type="text/javascript">
	$(function(){
		var paper = new Raphael($("#paper1")[0]);
		
		Raphael.fn.NGon = function(x, y, N, side) {
			var path = "", n, temp_x, temp_y, angle;
			for (n = 0; n <= N; n += 1) {
				// console.log(n);
				angle = n / N * 2 * Math.PI;
				temp_x = x + Math.cos(angle) * side;
				temp_y = y + Math.sin(angle) * side;
				path += (n === 0 ? "M" : "L") + temp_x + "," + temp_y;
			}
			// "this" refers to the paper object that called the function
			var shape = this.path(path);
			// don't forget to return the shape so that you can access it later
			return shape;
		}
		
		paper.customAttributes.redness = function (num) {
			var val = 255 * (1 - num / 100);
			// note that we do not directly operate on an object
			// instead, we return the object of final attributes
			return {fill: "rgb(255," + val + ", " + val + ")"};
		};
		
		Raphael.el.redder = function() {
			var rgb = Raphael.getRGB(this.attr("fill"));
			var newRed = rgb.r + 51;
			return this.attr("fill", "rgb(" + newRed + "," + rgb.g + "," + rgb.b + ")");
		}

		
		paper.NGon(40, 40, 3, 30).attr("redness", 50);
		paper.NGon(100, 80, 7, 20);
		
		
		// a sort of putrid olive color
		var r1 = paper.rect(10, 150, 50, 50).attr("fill", "#999900");
		// a putrid brown
		var r2 = paper.rect(80, 150, 50, 50).attr("fill", "#999900").redder();
		// a lovely orange
		var r3 = paper.rect(150, 150, 50, 50).attr("fill", "#999900").redder().redder();

	});
</script>
</head>
<body>
	<h1>Extending Raphael</h1>
	<p>Источник: [1], стр. 86 "Adding Functions"</p>
	<p>Указания: отображаются правильные треугольник и семиугольник, а также три квадрата, представляющие последовательность цветов.</p>
	<p>Особенности:</p>
	<ul>
		<li>функция для отображения правильных многоугольников добавлена в стандартный набор функций, доступный через объект <span class="code">paper</span>.</li>
		<li>в стандартный набор атрибутов добавлен атрибут <span class="code">redness</span>, с его помощью задан цвет треугольника</li>
		<li>в стандартный набор методов элемента добавлен метод, смещающий цвет объекта в красную сторону (использован при создании последовательности цветов для раскраски квадратов)</li>
	</ul>

	<div id="paper1" class="paper" style="width:600px; height:400px;">
	</div>
	
	<h2>Литература</h2>
	<ol>
		<li>Wilson, C. RaphaelJS Graphics and Visualization on the Web. O'Relly, 2013 г.</li>
	</ol>
</body>
</hmtl>